<script setup lang="ts">
import { Button, FormItem, Input, Space } from 'ant-design-vue';

// import { ref } from 'vue';

defineOptions({
  inheritAttrs: false,
});

const [model] = defineModel<string[]>({
  default: [],
  get(value) {
    value ??= [''];
    // 增加空字符串选项，以便总能显示至少一项
    if (value.length === 0) {
      value.push('');
    }
    return value;
  },
});

function add() {
  model.value.push('');
}

function remove(index: number) {
  if (model.value.length === 1) return;
  model.value.splice(index, 1);
}
</script>

<template>
  <Space class="w-full" direction="vertical">
    <FormItem
      v-for="(_, index) in model"
      :key="index"
      :rule="{
        required: true,
      }"
      class="mb-0 mt-0"
    >
      <Input :key="index" v-model:value.trim="model![index]" class="w-9/12" />
      <Button v-if="model.length > 1" class="ml-1" @click="remove(index)">
        -
      </Button>
      <Button class="ml-1" @click="add">+</Button>
    </FormItem>
  </Space>
</template>
